/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	// font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a{  
    text-decoration: none;
    color: #333;
}


/*---------------------------------------------------*/


*{
    box-sizing: border-box;
}

html,
body{
    min-height: 100%;
    font-size: 14px;
    color: #000;
    justify-content: space-between
}


/* Color */
@color_1: #333;
@color_2: #fff;
@color_3: #008ed6;
@color_4: #0974d2;
@color_5: #878f98;
@color_6: #ff4133;
@color_7: #40b72b;
@color_8: #e1e1e1;
@color_9: #5fd0ff;

@mainColor: @color_3;
@mainCOlorDark: @color_4;
@bgColor: @color_2;
@priceColor: @color_6;
@successColor: @color_7;

/* Font */
@fontColorLight: @color_2;
@fontColorgray: @color_5;
@fontSizeLevel: 22*@rem;
@fontSizeLg: 18*@rem;
@fontSizeMd: 16*@rem;
@fontSizeSm: 12*@rem;
@fontSizeXm: 10*@rem;

.df-title{
    font-size: @fontSizeMd;
}

.textOverFlow{
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap; 
}

.textOverFlowCount{
overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //显示的行

}


/* tools */

@rem: 1/16rem;

.max-page-width{
    margin: auto;
    max-width: 960*@rem;
}

.img-box{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    
    img{
        height: 100%;
    }

}

.page-bar{
    padding: 20*@rem 0;
    text-align: center;

}

.page-content{
    overflow: hidden;
    .max-page-width();
    padding: 30*@rem 0 40*@rem;
}

.shadow{
    box-shadow: 0 12*@rem 16*@rem -14*@rem rgba(100,100,100, .5);
}
.shadowBlock{
    box-shadow: 0 12*@rem 20*@rem -14*@rem rgba(140,140,140, .1);
}
.shadowMaiColor{
    box-shadow: 0 12*@rem 16*@rem -14*@rem #608569;
}

.radius-df{
    border-radius: 4*@rem;
}

.tipIcon{
    .radius-df();
    @h: 24*@rem;
    display: inline-block;
    margin: 0 6*@rem;
    padding: 0 6*@rem;
    height: @h;
    line-height: @h;
    font-size: @fontSizeXm;
    color: @fontColorLight;
}

.tipIcon + .tipIcon{
    margin-left: 10*@rem;
}

.tipIcon-df{
    .tipIcon();
    background: @color_5;
}

.tipIcon-main{
    .tipIcon();
    background: @mainColor;
}


.tipIcon-danger{
    .tipIcon();
    background: @color_6;
}


/* Transition */
.up-down-leave-to,
.up-down-enter{
    transform: translateY(-200px);
    opacity: 0;
}

.up-down-leave-ative,
.up-down-enter-ative{
    transition: all .5s;
}

.up-down-enter-to{
    transform: translateY(0);
    transition: all .5s;
}



/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
    transition: all .3s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateX(10px);
    opacity: 0;
  }